<template>
  <div class="h-46px">
    <el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入部门名称">
      <template #prefix>
        <Icon icon="ep:search" />
      </template>
    </el-input>
  </div>
  <div class="h-[calc(100vh-var(--heard-height)-var(--collapse-height)-46px-20px)] overflow-y-auto">
    <el-tree
      ref="treeRef"
      :data="deptList"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      :props="defaultProps"
      :default-expand-all="false"
      highlight-current
      node-key="id"
      @node-click="handleNodeClick"
      accordion
    >
      <template #default="{ node }">
        <span class="span-ellipsis">
          <el-tooltip
            class="item"
            effect="light"
            :content="node.label || ''"
            placement="right-start"
            :hide-after="1"
            :show-after="1"
          >
            <span>{{ node.label }}</span>
          </el-tooltip>
        </span>
      </template>
      <template #empty>
        <div style="color: #fff">暂无数据 </div>
      </template>
    </el-tree>
  </div>
</template>

<script lang="ts" name="DeptTree" setup>
import { ElTree } from 'element-plus'
import * as DeptApi from '@/api/system/dept'
import { defaultProps, handleTree } from '@/utils/tree'

const deptName = ref('')
const deptList = ref<Tree[]>([]) // 树形结构
const treeRef = ref<InstanceType<typeof ElTree>>()

watch(deptName, (val) => {
  treeRef.value!.filter(val)
})

/** 获得部门树 */
const getTree = async () => {
  const res = await DeptApi.getSimpleDeptList()
  deptList.value = []
  deptList.value.push(...handleTree(res))
}

/** 基于名字过滤 */
const filterNode = (name: string, data: Tree) => {
  if (!name) return true
  return data.name.includes(name)
}

/** 处理部门被点击 */
const handleNodeClick = async (row: { [key: string]: any }) => {
  row.deptIdList = null
  if (row.parentId === 0) {
    console.log('是最顶级部门：则不赋值,清空之前数据')
  } else {
    // 获取当前选中部门以及下级Id【包含选择ID】
    row.deptIdList = getKeyList(row, 'id')
  }
  emits('node-click', row)
}
const emits = defineEmits(['node-click'])

/**
 * 获取树形结果某个字段集合
 * @param nodeData
 * @param key
 */
const getKeyList = (nodeData: any, key: string) => {
  const listValue = []
  const findChildren = (data) => {
    if (data instanceof Array) {
      for (const node of data) {
        findChildrenKey(node)
      }
    } else {
      findChildrenKey(data)
    }
  }
  const findChildrenKey = (node) => {
    if (node[key]) {
      listValue.push(node[key])
    }
    if (node.children) {
      findChildren(node.children)
    }
  }
  findChildren(nodeData)
  return listValue
}

/** 初始化 */
onMounted(async () => {
  await getTree()
})
</script>

<style lang="scss" scoped>
.el-tree {
  margin-right: 10px;
  overflow: auto;
  background: none !important;
  box-sizing: content-box;
}

:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content),
:deep(.el-tree--highlight-current .el-tree-node.is-focusable > .el-tree-node__content),
:deep(.el-tree-node__content:hover) {
  border-radius: 10px !important;
}

// ::v-deep {
//   .el-tree-node {
//     /*设置横向滚动条*/
//     min-width: 100% !important;
//     display: block !important;
//     float: left;
//   }
// }
</style>
